<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业任务页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        #file-list {
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        button {
            padding: 5px 10px;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            padding: 10px 15px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background-color: #f4f4f9;
            color: #333;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        button {
            background-color: #007BFF;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-right: 5px;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>

    <script>
        // 将任务信息填充到表格中
        function populateTaskTable(tasks) {
            const tableBody = document.getElementById('task-table-body');
            tasks.forEach(task => {
                const row = document.createElement('tr');
                const idCell = document.createElement('td');
                idCell.textContent = task.task_id;
                row.appendChild(idCell);

                const executorCell = document.createElement('td');
                executorCell.textContent = task.executor;
                row.appendChild(executorCell);

                const locationCell = document.createElement('td');
                locationCell.textContent = task.location;
                row.appendChild(locationCell);

                const statusCell = document.createElement('td');
                statusCell.textContent = task.status;
                row.appendChild(statusCell);

                const productNameCell = document.createElement('td');
                productNameCell.textContent = task.productName;
                row.appendChild(productNameCell);

                const createTimeCell = document.createElement('td');
                createTimeCell.textContent = task.create_time;
                row.appendChild(createTimeCell);

                const actionCell = document.createElement('td');
                const startButton = document.createElement('button');
                startButton.textContent = '开始执行';
                startButton.addEventListener('click', () => startTask(task.task_id));
                actionCell.appendChild(startButton);

                row.appendChild(actionCell);
                tableBody.appendChild(row);
            });
        }

        // 开始任务函数
        function startTask(taskId) {
            console.log(`开始执行任务: ${taskId}`);
            // 可以添加调用接口开始任务的逻辑
            window.location.href = '/begin?taskId=' + taskId;
        }

        // 结束任务函数
        function endTask(taskId) {
            console.log(`结束执行任务: ${taskId}`);
            // 可以添加调用接口结束任务的逻辑
        }

        // 上传文件函数
        function uploadFile(taskId) {
            console.log(`为任务 ${taskId} 上传文件`);
            // 可以添加调用接口上传文件的逻辑
        }

        // 计算体积函数
        function calculateVolume(taskId) {
            console.log(`为任务 ${taskId} 计算体积`);
            // 可以添加调用接口计算体积的逻辑
        }

        // 从接口获取任务信息
        async function fetchTasks() {
            try {
                const response = await fetch('/your-api-url'); // 替换为实际接口地址
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const tasks = await response.json();
                populateTaskTable(tasks);
            } catch (error) {
                console.error('Error fetching tasks:', error);
            }
        }

        function fetchTasks() {
            const tasks = [
                {
                    task_id: 1,
                    executor: "显阳",
                    location: "北京",
                    status: "未开始",
                    productName:"烟煤",
                    create_time: "2025-03-10 09:00:00"
                },
                {
                    task_id: 2,
                    executor: "李四",
                    location: "上海",
                    status: "进行中",

                    productName:"烟煤",
                    create_time: "2025-03-11 10:30:00"
                },
                {
                    task_id: 3,
                    executor: "王五",
                    location: "广州",
                    status: "已完成",

                    productName:"烟煤",
                    create_time: "2025-03-12 14:15:00"
                },
                {
                    task_id: 4,
                    executor: "赵六",
                    location: "深圳",
                    status: "暂停",

                    productName:"烟煤",
                    create_time: "2025-03-12 15:45:00"
                }
            ];
            populateTaskTable(tasks);
        }

        // 页面加载完成后获取任务信息
        window.addEventListener('load', fetchTasks);
    </script>
</head>

<body>
<div>
    <!-- 新增表格展示任务信息 -->
    <table id="task-table">
        <thead>
        <tr>
            <th>任务id</th>
            <th>执行人</th>
            <th>执行地点</th>
            <th>当前状态</th>
            <th>产品</th>
            <th>创建时间</th>
            <th>操作列</th>
        </tr>
        </thead>
        <tbody id="task-table-body">
        <!-- 任务信息将填充到这里 -->
        </tbody>
    </table>
</div>
</body>

</html>
